GitHub

#GitHub| 来源: 网络整理| 查看: 265

Building a Bootstrap 5 Legend with the Help of ChatGPT Introduction

Lately, my mind has been 100% expanded by what ChatGPT can do to help me with my programming tasks. Especially tasks where I don't consider myself an expert and I need some help. This morning, as I'm working on the demo for an upcoming course titled "Server Component Fundamentals in React 18" for Pluralsight, I decided I needed a legend. Normally I don't do a wireframe for something so simple, but since I know you are not in my head, this is what I was thinking.

So, I go to the ChatGPT web site and start asking for help. Literally, after only about 2 or 3 minutes and a conversation with ChatGPT, here is the resulting React component displayed, as well as the code I got generated by ChatGPT with no changes from me.

import React, { useState } from "react"; type LegendProps = { legendTitle: string; }; function Legend({ legendTitle }: LegendProps) { const [reactServer, setReactServer] = useState(false); const [reactClient, setReactClient] = useState(false); const legendStyle: React.CSSProperties = { border: "1px solid #ccc", borderRadius: "5px", padding: "20px", backgroundColor: "#eee", }; const checkboxStyle: React.CSSProperties = { marginBottom: "10px", }; return ( {legendTitle} setReactServer(!reactServer)} /> React Server Components setReactClient(!reactClient)} /> React Client Components ); } export default function App() { return ( ); } The ChatGPT Conversation

So, what questions did I ask ChatGPT to get this? Below are the questions I asked but without the intervening answers from ChatGPT that led me to ask each question in order. Further down in this article you can look at the full conversation from my web session.

Create a legend in bootstrap 5 that includes checkboxes for two items, each indifferent colors Put the handlers inline Put a nice border around the legend Change the names of the variables for the checkboxes to showRsc and showRcc Make this with typescript Update usestate for typescript also Add a title to the legend saying "Display Options for Server and Client Components" Add some padding around the legend as well as the contents and make the background gray Rename variables rsc and rcc to React Server Components and React Client Components

Just 2 minutes of Q&A

Conclusions

ChatGPT and AI tools like this will change my programming forever. I doubt I'll use Google search nearly as much, I won't look on StackOverflow for answers as often, and in general, it will make me a better programmer.

Years ago, when car navigators became a thing, I had a good friend I'd call and ask for help when I'd get lost driving around. She's always help me, as she seem to know every street in my city. After a while I stopped calling her and she asked me one day why. I said that I'd replaced her with a Garmin navigation device that helped me get places, and when I made mistakes, it corrected them with no judgement (and yes, she's still my friend).

The Actual Dialog With ChatGPT in Pictures

I decided to see what I'd generated so copied it into a React project and viewed the results.

More refinement

And again, the final product.

【本文地址】

公司简介

联系我们